<template></template>

<script lang="ts" setup>
import { addMarker, IMarker, map } from "../store";
import { onMounted, PropType, watch, inject, onUnmounted } from "vue";
import basicIcon from "@/assets/images/marker.png";
const addSymbol = inject("addSymbol") as Function;
const removeSymbol = inject("removeSymbol") as Function;
const updateSymbol = inject("updateSymbol") as Function;
const props = defineProps({
  data: {
    type: Object as PropType<IMarker>,
    required: true,
  },
});
watch(
  () => props.data,
  (newData) => {
    updateSymbol({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [props.data.pos.longtitude, props.data.pos.latitude],
      },
      properties: {
        title: "123",
        icon: props.data.icon,
        size: props.data.size / 30,
        userData: props.data.properties.userData,
      },
    });
  },
  {
    deep: true,
  }
);

onMounted(() => {
  console.log(props.data);
  if (!props.data.properties) {
    props.data.properties = { size: 10, userData: {} };
  }
  addSymbol({
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: [props.data.pos.longtitude, props.data.pos.latitude],
    },
    properties: {
      title: "123",
      icon: props.data.icon,
      size: props.data.size / 30,
      userData: props.data.properties.userData,
    },
  });
});
onUnmounted(() => {
  removeSymbol({ id: props.data.id });
});
</script>

<style lang="scss" scoped></style>
